<template>
    <div class="template">
        <div class="box-sidebar">
            <div class="operation">
                <el-button type="danger" @click="DeleteName(Id)" style="margin-left:30px">删除</el-button>
                <el-button type="success" plain @click="addName">新增</el-button>
            </div>
<!--          //新增模板名称-->
          <el-dialog title="新增" :visible.sync="addVisible" width="50%">
            <el-form ref="form" :inline="true" :model="form" label-width="70px">
              <el-row>
                <el-form-item label="模板名称">
                  <el-input v-model="form.TemplateName"></el-input>
                </el-form-item>
                <el-form-item label="选择模板">
                  <el-select v-model="form.TemplateType">
                    <el-option key="1" label="护士模板" value="1"></el-option>
                    <el-option key="2" label="患者模板" value="2"></el-option>
                  </el-select>
                </el-form-item>
              <el-form-item label="有效日期">
                <el-input v-model="form.ExpiryDate"></el-input>
              </el-form-item>
              </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="AddTemplateName">确 定</el-button>
            </span>
          </el-dialog>
<!--          //新增模板名称-->
<!--          //模板名称列表-->
            <div class="list">
                <el-table :data="table"
                          @current-change ="tablelist">
                    <el-table-column prop="TemplateName" label="协议模板名称"></el-table-column>
                </el-table>
            </div>
<!--          //模板名称列表-->
        </div>
        <div class="box-header">
            <el-row class="header-col" :gutter="10">
                <el-col :span="7">
                    <span>
                        协议模板名称:{{templateName}}
                    </span>
                </el-col>
                <el-col :span="7">
                    <span >启用状态：</span>
                    <el-select v-model="templateStatus">
                        <el-option key="1" label="正常" value="1" ></el-option>
                        <el-option key="2" label="禁用" value="2" ></el-option>
                    </el-select>
                </el-col>
                <el-col :span="4">
                  <el-button type="primary" plain @click="fetchTemplateByStatus" >查询</el-button>
                  <el-button plain type="success" @click="addTemplate" >新增</el-button>
                </el-col>

<!--              //新增协议表单-->
            <el-dialog :visible.sync="addTemplateVisible" top="10px" width="50%">
                <el-form label-position="left" label-width="50px" style="position: relative;top: -30px;padding: -10px 20px" ref="form"  :model="form" >
                  <el-row>
                    <el-col :span="8">
                      模板名称：{{templateName}}
                    </el-col>
                  </el-row>
                  <el-row style="margin: 20px auto 35px">
                    <el-col >
                      <quill-editor  v-model="form.Discription" :options="editorOption"></quill-editor>
                    </el-col>
                  </el-row>
                  <el-row>
                  <el-form-item label="备注:">
                      <el-input type="textarea"
                                :autosize="{ minRows: 1, maxRows: 4}"
                                v-model="form.Remark"></el-input>
                  </el-form-item>
                  </el-row>
                </el-form>
                <span slot="footer" class="dialog-footer">
<!--                    <el-checkbox label="启用" class="bottonstatus" v-model="form.Status"></el-checkbox>-->
                    <el-button type="primary" >打印</el-button>
                    <el-button type="primary" >导出</el-button>
                    <el-button type="primary" @click="addTemplateVisible = false" >取消</el-button>
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                  </span>
              </el-dialog>
<!--              //新增协议表单-->
            </el-row>
        </div>
<!--      //协议列表-->
        <div class="box-main">
            <el-table :data="detail" border>
                    <el-table-column prop="TemplateName" label="模板名称"></el-table-column>
                    <el-table-column prop="VersionNumber" label="版本号"></el-table-column>
                    <el-table-column prop="Status" label="启用状态"></el-table-column>
                    <el-table-column prop="CreateUserName" label="创建人"></el-table-column>
                    <el-table-column prop="CreatetTime" label="创建时间"></el-table-column>
                    <el-table-column prop="UpdateUserName" label="修改人"></el-table-column>
                    <el-table-column prop="UpdateTime" label="修改时间"></el-table-column>
                    <el-table-column prop="Remark" label="备注"></el-table-column>
                    <el-table-column width="160" label="操作">
                            <template slot-scope="scope">
                                <el-button type="text" size="mini"  @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                                <el-button type="text" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                                <el-button type="text" size="mini" @click="handleView(scope.$index, scope.row)">详情查询</el-button>
                                <el-button type="text" size="mini">导出</el-button>
                                <el-button type="text" size="mini">打印</el-button>
                            </template>
                    </el-table-column>
            </el-table>
<!--          //协议列表-->
<!--          //修改协议版本-->
          <el-dialog :visible.sync="editVisible" top="10px" width="50%">
              <el-form label-position="left" label-width="50px" class="editform" ref="form" :model="form" >
                <el-row>
                  <el-col :span="8">
                    模板名称：{{templateName}}
                  </el-col>
                  <el-col :span="8">版本号：{{form.VersionNumber}}</el-col>
                  <el-col :span="8">状态：{{form.Status}}</el-col>
                </el-row>
                <el-row style="margin: 35px auto" >
                  <el-col >
                    <quill-editor  v-model="form.Discription" :options="editorOption"></quill-editor>
                  </el-col>
                </el-row>
                <el-row>
                  <el-form-item label="备注:">
                    <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 4}" v-model="form.Remark"></el-input>
                  </el-form-item>
                </el-row>
              </el-form>
             <span slot="footer" class="dialog-footer">
<!--                    <el-checkbox label="启用" class="bottonstatus" v-model="form.Status"></el-checkbox>-->
                    <el-button type="primary" >打印</el-button>
                    <el-button type="primary" >导出</el-button>
                    <el-button type="primary" @click="editVisible = false" >取消</el-button>
                    <el-button type="primary" @click="onSubmit">保存为新版本</el-button>
                    <el-button type="primary" @click="editTemplate">保存</el-button>
                  </span>

          </el-dialog>
<!--          //修改协议版本-->
<!--          //查看协议版本-->
          <el-dialog :visible.sync="viewVisible" top="10px" width="50%">
            <el-form label-position="left" label-width="50px" claa="viewForm" :disabled="true" ref="form" :model="form" >
                <el-row>
                  <el-col :span="8">
                    模板名称：{{templateName}}
                  </el-col>
                  <el-col :span="8">版本号：{{form.VersionNumber}}</el-col>
                  <el-col :span="8">状态：{{form.Status}}</el-col>
                </el-row>
                <el-row style="margin: 35px auto"  >
                  <el-col >
                    <quill-editor  v-model="form.Discription"
                                   @focus="focus($event)"
                                   :options="editorOption"></quill-editor>
                  </el-col>
                </el-row>
                <el-row>
                  <el-form-item label="备注:">
                    <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 4}" v-model="form.Remark"></el-input>
                  </el-form-item>
                </el-row>
              </el-form>
<!--            <span slot="footer" class="dialog-footer">-->
<!--                    <el-checkbox label="启用" class="bottonstatus" v-model="form.Status"></el-checkbox>-->
<!--                  </span>-->
          </el-dialog>
<!--          查看协议版本-->
        </div>
    </div>
</template>

<script>
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import { quillEditor } from 'vue-quill-editor';
import {fetchAllTemplate,
  fetchAllVersionOfTemplate,
  addTemplateName,
  CreateNewTemplateVersion,
  DeleteTemplate,
  UpdateTemplateVersion,
  DeleteVersionById,
  QueryByStatus} from "../../../api/protocol";

const defaultform={
  Id:'',
  TemplateId:'',
  TemplateName:'',
  ExpiryDate:'',
  TemplateType:'',
  VersionNumber:'',
  Remark:'',
  Status:'',
  Discription:''
}

export default {
    data(){
        return{
          form: Object.assign({},defaultform),
          table:[],
          Id:'',
          firsttemplateName:'',
          templateName:'',
          templateStatus:'',
          detail:[],
          addVisible: false,
          addTemplateVisible: false,
          editVisible: false,
          viewVisible: false,
          idx: -1,
          content: '',
          editorOption: {
            placeholder: 'Hello World'
          }
        }
    },
  components: {
    quillEditor
  },
    methods:{
      fetchTemplateByStatus(){
        let para = {templateName: this.templateName,
                     Status: this.templateStatus}
        QueryByStatus(para).then(res=>{
          this.detail = res.Result
          for(let i=0;i<this.detail.length;i++){
            this.detail[i].Status = this.switchStatus(this.detail[i].Status)
          }
        })
      },
      //删除协议
      handleDelete(index, row){
        this.$confirm('是否要删除该协议模板?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'}).then(() => {
        this.idx = index;
        this.form = Object.assign({},row)
        let para = {id: this.form.Id}
        DeleteVersionById(para).then(res=>{
          this.getAllVersionOfTemplate(this.templateName)
          this.$message({
            message: '删除成功',
            type: 'success',
            center: true
          });
            }).catch(err=>{
          console.log(err);
        })})
      },
      //查看协议
      focus(event){
        event.enable(false);  //设置富文本编辑器不可编辑
      },
      handleView(index, row){
        this.idx = index;
        this.form = Object.assign({},row)
        console.log(this.form)
        this.viewVisible = true;
      },
      //编辑协议模板
      handleEdit(index, row) {
        console.log(this.form)
        this.idx = index;
        this.form = Object.assign({},row)
        this.editVisible = true;
      },
      editTemplate(){
        console.log(this.form)
        let para={
          id:this.form.Id,
          discription:this.form.Discription,
          remark:this.form.Remark
        }
        UpdateTemplateVersion(para).then(res=>{
          this.editVisible = false
          this.getAllVersionOfTemplate(this.templateName)
        }).catch(err=>{
          console.log(err);
        })
      },
      //删除模板名称
      DeleteName(Id){
        console.log(this.Id)
        this.$confirm('是否要删除该模板名称?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'}).then(() => {
        let para={Id:Id}
          DeleteTemplate(para).then(res => {
            this.templateName = ''
            this.getAllTemplates()
            console.log(this.table)
            this.getAllVersionOfTemplate(this.templateName)
            this.$message({
              message: '删除成功',
              type: 'success',
              center: true
            });
          }).catch(err => {
            console.log(err);
          })
        })

      },
      //新增模板
      addTemplate(){
        this.form={}
        this.addTemplateVisible = true
        console.log(this.templateName)
      },
      onSubmit(){
        this.form.templateName = this.templateName
        this.addTemplateVisible = false
        this.editVisible = false
        CreateNewTemplateVersion(this.form).then(res=>{
          this.form={}
          this.getAllVersionOfTemplate(this.templateName)
          this.$message({
            message: '添加成功',
            type: 'success',
            center: true
          });
        })

      },
      //新增模板名称
      addName(){
        this.form={}
        this.addVisible = 'true'
      },
      AddTemplateName(){
        addTemplateName(this.form).then(res=>{
          this.addVisible = false
          this.Id = this.form.Id
          this.getAllTemplates()
          this.templateName = this.form.TemplateName
          this.getAllVersionOfTemplate(this.templateName)
          this.$message({
            message: '添加成功',
            type: 'success',
            center: true
          });
        })

      },
      //点击列表
      tablelist(event) {
        this.Id = parseInt(event.Id)
        this.templateName = event.TemplateName
        this.getAllVersionOfTemplate(this.templateName)
      },
      //获取模板名称
        getAllTemplates(){
            fetchAllTemplate().then(res=>{
              this.table= res.Result
              //console.log(this.table)
            }).catch(err=>{
              this.table = []
                console.log(err);
            })
        },

      // 获取协议模板
      switchStatus(status){
        switch (status) {
          case 1:
            return '正常'
          case 2:
            return '禁用'
        }
      },
      getAllVersionOfTemplate(TemplateName) {
        let para={templateName:this.templateName}
        fetchAllVersionOfTemplate(para).then(res=>{
          this.detail = res.Result
          for(let i=0;i<this.detail.length;i++){
            this.detail[i].Status = this.switchStatus(this.detail[i].Status)
          }
          //console.log(this.detail)
        }).catch(err=>{
          this.detail = []
              console.log(err);
        })
      }

    },
    created() {
      fetchAllTemplate().then(res=>{
        this.table= res.Result
        this.Id = this.table[0].Id
        this.templateName = this.table[0].TemplateName
        this.firsttemplateName = this.table[0].TemplateName
        console.log(this.Id)
        fetchAllVersionOfTemplate({templateName:this.firsttemplateName}).then(res=>{
          this.detail = res.Result
          for(let i=0;i<this.detail.length;i++){
            this.detail[i].Status = this.switchStatus(this.detail[i].Status)
          }
          //console.log(this.detail)
        }).catch(err=>{
          this.detail = []
          console.log(err);
        })
      }).catch(err=>{
        console.log(err);
      })
    }
}
</script>

<style scoped>
    .template{
        color: #606266;
    }
    .box-sidebar{
        position: absolute;
        left:10px;
        bottom: 10px;
        top: 10px;
        width: 180px;
        border: 1px solid rgb(191, 203, 217);
    ;
    }
    .box-header{
        position: absolute;
        left: 200px;
        top: 10px;
        right: 10px;
        height: 50px;
        border: 1px solid rgb(191, 203, 217);
        padding-left:15px;
    }
    .box-main{
        position: absolute;
        right: 10px;
        top: 70px;
        left: 200px;
        bottom: 10px;
    }
    .operation{
        margin-top: 10px;
    }
    .list{

        width: 90%;
        margin:0 auto;
        margin-top: 10px;
    }
    .header-col{
        line-height: 50px;
    }
    .dialog-footer.el-checkbox {
      margin-right: 30px;
    }
    .bottonstatus {
      margin-right: 30px;
    }
    .el-dialog__wrapper>.el-dialog>.el-dialog__body {
      padding: 0 20px;
    }
    .viewForm,
    .editForm {
      position: relative;
      top: -10px;
      padding: -15px 20px
    }
</style>